<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/* 避免使用class和id选择器：ul的第一个子元素 和最后一个子元素*/
      ul li:first-child{
          background: red;
      }
      ul li:last-child{
          background: gold;
      }
       /* 只选择p1 :定位到父元素选择当前的第一个元素并且是当前元素才会生效*/
       /* nth-child()有可能会被父元素阻碍，比如第一个是h1就失效 */
       p:nth-child(1){
           background: gold;
       }
       /* 选择父元素里面第二个为p的元素 */
       p:nth-of-type(2){
           background: brown;
       }
       a:hover{
           background: orange;
       }
    </style>
</head>
<body>
    <a href="#">hover颜色覆盖</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</p></li>
    </ul>

</body>
</html>